<template>
  <article class="page mine-page">
      <div class="header">
        <div @click="tools.back()" class="back"><span class="arrow"></span></div>
        <div class="head-bd">
          我的积分
        </div>
        <div @click="detail()" class="message"><div class="head-btn-text">积分明细</div></div>
      </div>

    <section class="frame-content-sub no-bg">
      <div class="score-hd">
        <h1 class="score">{{myIntegrals.totalScore}}</h1>
        <p class="tip">当前积分，继续努力</p>
      </div>

      <section class="">
        <section @click="goSuperMarket" class="block red-car">
          <div class="img"><img src="../../../../static/images/dangjian/mine/gift.png" alt=""></div>
          <div class="cont">
            <div class="title">红云超市兑福利</div>
            <div class="tip">积分兑换</div>
          </div>
        </section>

        <section class="block score-bd">
          <div class="item hd">
            <div class="hd-title">积分规则</div>
            <div class="tip">
              今日已积累  <span class="color-red">{{todayData.dayScore}}积分</span>
            </div>
          </div>

          <div class="item" v-if="todayData.list" v-for="item in todayData.list">
            <div class="cont">
              <h1 class="title">{{item.name}}</h1>
              <div class="tip">{{item.desc}}</div>
              <div class="tip-sub">
                <progressBar class="progress" :hideValue="true" :value="percent(item)"></progressBar>
                <i class="pdh-1"></i>
              </div>
            </div>
            <div v-if="item.url == 'url'||item.url == 'URL'"></div>
            <div v-else-if="item.dayMaxScore!==0 && item.dayMaxScore===item.hasScore" class="btn">已完成</div>
            <div v-else-if="item.dayMaxScore===0 || item.dayMaxScore!==item.hasScore" @click="go(item.url)" class="btn btn-red">去看看</div>

<!--            <div v-if="true" @click="go(item.url)" class="btn btn-red">去看看</div>-->
          </div>
          <!--<div class="item">
            <div class="cont">
              <h1 class="title">登录</h1>
              <div class="tip">1分/每日首次登录</div>
              <div class="tip-sub">
                <progressBar class="progress" :hideValue="true" :value="'70%'"></progressBar>
                <i class="pdh-1"></i>1分/每日上限1分
              </div>
            </div>
            <div class="btn btn-red">去看看</div>
          </div>-->
        </section>


      </section>


      <div class="pdv-0"></div>
    </section>
  </article>
</template>

<script>
  import progressBar from '@/components/common/progressBar.vue'
  import moment from 'moment'
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  export default {
    components: {progressBar},
    name: 'personalcenter',
    data () {
      return {
        fn: tools,
        userInfo: {},
        partyInfo: {},
        sysFile: {},
        todayData: {},
        myIntegrals: {},
        // getKey:'1' //判断是否走新页面 1 走老页面 0 新页面
      }
    },
    created () {
      this.userInfo = this.$localStorage.get('userInfo')
      let pInfo = this.$localStorage.get('partyInfo')
      if (pInfo) {
        this.partyInfo = pInfo
      }
      // this.getDictValue()
      // this.getFile()
      this.myIntegral()
      this.dayDetailList()
    },
    methods: {
      percent (data) {
        if(data.pointId==="08fee8ad09014486b37971acbdd7892c"){//适配扫码签到
          if(data.hasScore >= 1){
            return  '100%'
          }
          return data.hasScore  / dayMaxScore * 100 + '%'
        }
        let dayMaxScore = data.dayMaxScore
        if (data.dayMaxScore === 0) {
          dayMaxScore = data.dayMaxScore + 10
        }
        return data.hasScore / dayMaxScore * 100 + '%'
      },
      completeText (data) {

      },
      goSuperMarket () {
        sessionStorage.setItem("menuIndex",0);
        this.$router.push({name: 'supermarketHome'}) //新超市
        /*let data = {
          catKey: "CAT_MALL_",
          treeKey: "IS_OPEN",
        };
        this.fetchService.dictValue(data).then((res) => {
          console.log("this.fetchService.dictValue", res.data);
          if(res.code !== 0){
            return
          }
          if (res.code === 0 && res.data.length>0) {
            if(res.data[0].key === '0'){//判断是否走新页面 1 走老页面 0 新页面
              sessionStorage.setItem("menuIndex",0);
              this.$router.push({name: 'supermarketHome'}) //新超市
            }else {
              this.$router.push({name: 'superMarket'})//老超市
            }
          }else{
            this.$router.push({name: 'superMarket'})//老超市
          }
        });*/
      },
      detail () {
        // this.$router.push({path: 'pointsDetails'})//原来的积分明细
        this.$router.push({ path: "scoreDetail" });//新版积分明细
      },
      go (path) {
        this.$router.push({path: path})
      },
      getTime (createTime) {
        if (!createTime) {
          return ''
        }
        return moment(createTime).format('MM月DD日')
      },
      getFile () {
        let fileId = this.userInfo.photo
        this.fetchService.sysFile(fileId).then(res => {
          if (res.code !== 0) {
            // return tools.tip(res.message)
          }
          this.sysFile = res.data
        })
      },
      myIntegral () {
        let data = {
          userId: this.userInfo.id
        }
        this.fetchService.myIntegral(data.userId).then(res => {
          if (res.code !== 0) {
             return tools.tip(res.message)
          }
          this.myIntegrals = res.data
        })
      },
      dayDetailList () {
        moment.lang('zh-cn')
        let params = {
          userId: this.userInfo.id,
          dateStr: moment().format('YYYY-MM-DD')
        }
        this.fetchService.dayDetailList(params).then(res => {
          if (res.code !== 0) {
            return tools.tip(res.message)
          }
          this.todayData = res.data
        })
      },
      showImg (fileId) {
        let fileUrl = this.tools.getImgUrl(fileId)
        console.log('-------------fileUrl=', fileUrl)
        return fileUrl
      },
      //请求字典值
      // getDictValue() {
      //   let data = {
      //     catKey: "CAT_MALL_",
      //     treeKey: "IS_OPEN",
      //   };
      //   this.fetchService.dictValue(data).then((res) => {
      //     console.log("this.fetchService.dictValue", res.data);
      //     if(res.code !== 0){
      //       return
      //     }
      //     if (res.code === 0 && res.data.length>0) {
      //       this.getKey = res.data[0].key;
      //       console.log('this.getDict',this.getKey);
      //     }else{
      //       this.getKey = '1'
      //     }
      //   });
      // },
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  .mine-page{
    background: url("../../../../static/images/dangjian/mine/bg-mine-hd.png") $bg-color no-repeat center #{pxToRem($head-height)};
    background-size: 100% auto;
    padding:0;
    .header {
      justify-content: space-between;
      margin-bottom: pxToRem(0px);
      position: relative;
    }
  }

  .score-hd {
    height:242px;
    text-align: center;
    background: url("../../../../static/images/dangjian/mine/bg-mine-hd.png") $theme-color no-repeat center;
    background-size: 100% auto;
    .score {
      font-size:56px;
      line-height:1em;
      font-weight:400;
      color:rgba(255,255,255,1);
      padding-top:50px;
    }
    .tip {
      font-size:$tipFontSize;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }

  .red-car {
    position: relative;
    margin-top:-60px;
    background:#fff;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    padding:29px 34px;
    margin-bottom:0;
    &::after {
      position:absolute;
      top:50%;
      right:40px;
      transform:translateY(-50%);
      content:'';
      width: pxToRem(16px);
      height: pxToRem(25px);
      background:rgba(199,199,204,1);
      background: url("../../../../static/images/dangjian/dangwu/arrow-left.png") no-repeat center;
      background-size: auto 100%;
    }
    .img {
      width:101px;
      height:94px;
      margin-right:32px;
      img {
        @include fullImg();
      }
    }
    .cont {
      .title {
        font-size:$titleFontSize;
        line-height: 1.5em;
        font-weight:400;
        color:rgba(51,51,51,1);
      }
      .tip {
        font-size:$tipFontSize;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height: 1.5em;
      }
    }
  }
  .score-bd {
    padding:10px 30px;
    .hd {
      .hd-title {
        font-size: $titleFontSize;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
      .tip {
        font-size:$tipFontSize;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:60px;
        span {
          padding-left:10px;
        }
      }
    }
    .item {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:37px 0;
      border-bottom:1px solid $border-color;
      &:last-child {
        border:none;
      }
      .cont {
        .title {
          font-size:$titleFontSize;
          font-weight:400;
          color:rgba(51,51,51,1);
        }
        .tip {
          font-size:$tipFontSize;
          font-weight:400;
          color:rgba(153,153,153,1);
        }
        .tip-sub {
          display:flex;
          font-size:$titleFontSize;
          font-weight:400;
          color:rgba(153,153,153,1);
          .progress {
            font-size:0;
          }
        }
      }
      .btn {
        width:114px;
        height:60px;
        line-height:60px;
        background:rgba(242,242,242,1);
        border-radius:4px;
        font-size:$defaultFontSize;
        font-weight:400;
        color:rgba(102,102,102,1);
        text-align: center;
        &.btn-red {
          background:rgba(255,255,255,1);
          border:1px solid $theme-color;
          border-radius:4px;
          font-size:$defaultFontSize;
          font-weight:400;
          color:$theme-color;
        }
      }
    }
  }
</style>
